<template>
	<view class="swiper">
		<view class="swiper-title"></view>
		<swiper :style="{height:fullHeight}" class="swiper-tall" :indicator-dots="indicatorDots" :autoplay="autoplay" 
		 :previous-margin="previousMargin" :next-margin="nextMargin" 
		 :circular="circular" @change="change" :current="swiperCurrentIndex">
			<swiper-item class="swiper-container" v-for="(img,index) in imgs" :key="index" :item-id="index" :data-year="index">
				<view class="swiper-item" :animation="animationData[index]">
					<!-- <image :src="baseURL+img.img" v-if="swiperCurrentIndex != index" @longpress='save(baseURL+img.img)' style="width:100%; height:100%;" mode=""></image> -->
					<canvas style="width:100%; height:100%;" :canvas-id="'firstCanvas'+index" @longpress='save("firstCanvas"+index)'></canvas>
				</view>
			</swiper-item>
		</swiper>
		<view class="msg">—————— 长按保存图片，或发送给朋友 ——————</view>
		<view class="scrollbox">
			<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="0">
				<view class="swiper-tab-list" v-for="(img,index) in imgs" :key="index">
					<image :src="baseURL+img.img" mode=""></image>
					<view class="mark" @click="cleck(index)">
						<view v-if="butCurrent == index"></view>
					</view>
				</view>
			</scroll-view>
			<view class="more" @click="showSpec">
				<image src="../../static/mine/order1.png" mode=""></image>
				推荐语
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard">
			<!-- 遮罩层 -->
			<view class="mask" @tap="hideSpec"></view>
			<view class="layer">
				<view class="content">
					<view class="title">{{signWordtext}}</view>
				</view>
				<view @click="signWord">换一个</view>
				<view class="btn"><view class="button" @tap="setClipboardData">复制推荐语</view></view>
			</view>
		</view>
	</view>
</template>
<script>
	import QRCode from '@/common/qrcode.js'
	export default {
		data() {
			return {
				screenHeight: 0,
				animationData: [{},{},{},{},{}],
				title: '0',
				indicatorDots: false,
				autoplay: false,
				// previousMargin: uni.upx2px(120)+'px',
				// nextMargin: uni.upx2px(120)+'px',
				previousMargin: uni.upx2px(0)+'px',
				nextMargin: uni.upx2px(0)+'px',
				circular: true,
				zoomParam: 1.10,
				swiperCurrentIndex: 0,
				data: [],
				max: 0,
				imgs:[],
				
				baseURL:this.$API.baseURL,
				butCurrent:0,
				specClass:'',
				signWordtext:'',
				
				UserDetail:'',
				signToUrl:'',
			}
		},
		computed:{
			fullHeight() {
				const res = uni.getSystemInfoSync();
				return res.windowHeight - uni.upx2px(60) - (res.statusBarHeight+66)+'px';
			}
		},
		onLoad() {
			this.animation = uni.createAnimation();
			this.animation.scale(this.zoomParam).step();
			this.animationData[0] = this.animation.export();
			
			this.getUserDetail();
			this.signImgs();
		},
		methods: {
			//canvas
			canvasdraw(img){
				const ctx = uni.createCanvasContext('firstCanvas'+this.swiperCurrentIndex)
				//画布清空
				ctx.clearRect(0,0,uni.upx2px(530),uni.upx2px(858));  
				//图片填充
				// ctx.drawImage(img,0,0,uni.upx2px(432),uni.upx2px(700))
				ctx.drawImage(img,0,0,uni.upx2px(530),uni.upx2px(858))
						
				//底部打卡信息
				ctx.rect(uni.upx2px(20), uni.upx2px(500),uni.upx2px(490), uni.upx2px(100))
				ctx.setFillStyle('#EEEDE9')
				ctx.fill()
				//人头图片填充
				// ctx.drawImage('/static/cart/wode-F.png',uni.upx2px(40),uni.upx2px(520),uni.upx2px(60),uni.upx2px(60))
				var avatar = this.baseURL+this.UserDetail.avatar;
				ctx.drawImage(avatar,uni.upx2px(40),uni.upx2px(520),uni.upx2px(60),uni.upx2px(60))
				//文字填充
				ctx.setFillStyle('#000')
				ctx.setFontSize(20)
				ctx.fillText(this.time,uni.upx2px(110),uni.upx2px(565))
				ctx.setFontSize(12)
				ctx.fillText('累计打卡'+this.signNum+'天',uni.upx2px(220),uni.upx2px(565))
				
				//二维码 
				// ctx.drawImage(this.signToUrl,uni.upx2px(420),uni.upx2px(655),uni.upx2px(90),uni.upx2px(90))
				ctx.drawImage(this.$API.signToQr+"?width=55&height=55",uni.upx2px(370),uni.upx2px(635),55,55)
				ctx.setFillStyle('#FFFFFF')
				
				
				ctx.setFontSize(12)
				ctx.fillText('美好生活从打卡开始',uni.upx2px(130),uni.upx2px(685))
				ctx.setFontSize(12)
				ctx.fillText('扫码和我一起',uni.upx2px(130),uni.upx2px(720))
				ctx.beginPath();
				//时间
				var timeObj = this.getCurrentDate();
				
				ctx.rect(uni.upx2px(400), uni.upx2px(40),uni.upx2px(100), uni.upx2px(100));
				ctx.fillStyle = 'rgba(100, 100, 100, 0.2)';
				ctx.fill();
				ctx.setFillStyle('#FFFFFF');
				ctx.setFontSize(20);
				ctx.fillText(timeObj.day,uni.upx2px(425),uni.upx2px(90));
				ctx.setFontSize(10);
				ctx.fillText(timeObj.year+'.'+timeObj.month,uni.upx2px(410),uni.upx2px(120));
				
				ctx.beginPath();
				
				ctx.rect(uni.upx2px(400), uni.upx2px(160),uni.upx2px(100), uni.upx2px(100))
				ctx.fillStyle = 'rgba(100, 100, 100, 0.2)';
				ctx.fill()
				ctx.setFillStyle('#FFFFFF')
				ctx.setFontSize(16)
				ctx.fillText(timeObj.days,uni.upx2px(420),uni.upx2px(210))
				ctx.setFontSize(10)
				ctx.fillText(timeObj.daysEnglish,uni.upx2px(410),uni.upx2px(240))
				
				
				
				
				
				ctx.draw()
			},
			//获取二维码
			signToQr(){
				var _this = this;
				uni.request({
					url:this.$API.signTo,
					method:"GET",
					header:this.$API.get_head(),
					success: (res) => {
						var urlss =  res.data.data.settings
						
						
						let qrcode = new QRCode({
							context: _this, // 上下文环境
							canvasId:'ccc', // canvas-id
							usingComponents: false, // 是否是自定义组件
							showLoading: true, // 是否显示loading
							loadingText: '二维码生成中', // loading文字
							text: urlss, // 生成内容
							size:uni.upx2px(200), // 二维码大小
							background: '#ffffff', // 背景色
							foreground: '#000000', // 前景色
							pdground: "#000000", // 定位角点颜色
							correctLevel: 3, // 容错级别
							image: '', // 二维码图标
							imageSize: 40,// 二维码图标大小
							cbResult: function (res) { // 生成二维码的回调
								_this.signToUrl = res;
								// console.log(res)
								
							},
						});
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//签到
			signIn(){
				var _this = this;
				uni.request({
					url:this.$API.signIn,
					method:"GET",
					data:{
						openid:uni.getStorageSync("userid")
					},
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data.message == 'success'){
							uni.showModal({
								content:res.data.data.message,
								showCancel: false,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
							_this.signNum = res.data.data.signNum
							_this.time = res.data.data.time.substr(11,5)
							// _this.signToQr()
							_this.canvasdraw(_this.baseURL+_this.imgs[0].img)
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//底图可选择
			signImgs(id,j){
				var _this = this;
				uni.request({
					url:this.$API.signImgs,
					method:"POST",
					header:this.$API.get_head(),
					success: (res) => {
						_this.imgs = res.data.rows;
						_this.signIn();
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			change(e) {
				this.butCurrent = e.detail.current;
				this.swiperCurrentIndex = e.detail.current;
				this.title = e.detail.currentItemId;
				for (let key in this.animationData) {
					if (e.detail.currentItemId == key) {
						this.animation.scale(this.zoomParam).step();
						this.animationData[key] = this.animation.export();
					} else {
						this.animation.scale(1.0).step();
						this.animationData[key] = this.animation.export();
					}
				}
				this.canvasdraw(this.baseURL+this.imgs[this.swiperCurrentIndex].img)
			},
			//用下部分选中
			cleck(e){
				this.swiperCurrentIndex = e;
				this.butCurrent = e;
			},
			//保存图片到相册
			save: function(e) {
				uni.canvasToTempFilePath({
				  x: 0,
				  y: 0,
				  width: uni.upx2px(530),
				  height:uni.upx2px(858),
				  canvasId: e,
				  success: function(res) {
				    // 在H5平台下，tempFilePath 为 base64
				    
					uni.saveImageToPhotosAlbum({
						filePath:res.tempFilePath,
						success: function(res) {
							uni.showModal({
								content: '图片已经保存至相册',
								showCancel: false
							});
						},
						fail: function(res) {
							uni.showModal({
								content: '图片保存失败',
								showCancel: false
							});
						}
					});
				  } 
				})
			},
			//规格弹窗
			showSpec(fun) {
				
				this.specClass = 'show';
				this.specCallback = fun;
				this.signWord()
			},
			discard() {
				//丢弃
			},
			//关闭规格弹窗
			hideSpec() {
				this.specClass = 'hide';
				//回调
			
				this.selectSpec&&this.specCallback&&this.specCallback();
				this.specCallback = false;
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			//随机文案选择
			signWord(){
				var _this = this;
				uni.request({
					url:this.$API.signWord,
					method:"POST",
					header:this.$API.get_head(),
					success: (res) => {
						_this.signWordtext = res.data.data.text;
						
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//复制文案
			setClipboardData(){
				uni.setClipboardData({
				    data: this.signWordtext,
				    success: function () {
				        uni.showToast({
				        	title:"复制成功",
				        	icon:'none',
							duration:2000
				        })
				    }
				});
			},
			//获取用户信息
			getUserDetail(){
				var _this=this;
				uni.request({
					url:this.$API.getUserDetail,
					method:"POST",
					data:{
						userid:uni.getStorageSync("userid"),
					},
					header:this.$API.get_head(),
					success: (res) => {
						_this.UserDetail=res.data.data;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			},
			//js获取当前日期，包括星期几
			getCurrentDate() {
			      var myDate = new Date();
			      var year = myDate.getFullYear(); //年
			      var month = myDate.getMonth() + 1; //月
			      var day = myDate.getDate(); //日
			      var days = myDate.getDay();
				  var daysEnglish = ''
			      switch(days) {
			            case 1:days = '周一';daysEnglish='MONDAY';break;
			            case 2:days = '周二';daysEnglish='TUESDAY';break;
			            case 3:days = '周三';daysEnglish='WEDNESDAY';break;
			            case 4:days = '周四';daysEnglish='THURSDAY';break;
			            case 5:days = '周五';daysEnglish='FRIDAY';break;
			            case 6:days = '周六';daysEnglish='SATURDAY';break;
			            case 0:days = '周日';daysEnglish='SUNDAY';break;
			      }
			      // var str = year + "年" + month + "月" + day + "日  " + days;
					var str ={
						'year':year,
						'month':month,
						'day':day,
						'days':days,
						'daysEnglish':daysEnglish,
					}
				  
			      return str;
			}
		}
	}
</script>

<style lang="scss">
	page{
		display: flex;
		flex-wrap: wrap;  
		background:#666666;
	}
	.swiper-container {
		display: flex;
		align-items: center;
	}

	.swiper-item {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		// height: 858upx;
		// width: 530upx;
		width: 530upx;
		height: 800upx;
		
		
		// height: 700upx;
		// width: 432upx;
		line-height: 300upx;
		text-align: center;
		broder-radius: 6upx;
		margin-bottom: 50upx;
	}



	.swiper-tall {
		display: flex;
		align-items: center;
	}



	.swiper-title {
		width: 750upx;
		text-align: center;
	}





/*下部分的滑块选中*/
	
	
	/* #ifdef MP-ALIPAY */
	.swiper-tab-list {
		display: inline-block;
	}
	/* #endif */
	.swiper-tab-list{
		position: relative;
	}
	.swiper-tab-list>image{
		width:120upx;
		height:120upx;
		border-radius:10upx;
	}
	.mark{
		position:absolute;
		top:0upx;
		left: 0;
		width:100%;
		height:100%;
		text-align: center;
	}
	.mark view{
		display: inline-block;
		width:120upx;
		height:120upx;
		border-radius:10upx;
		background:#000000;
		opacity:.4;
	}
	
	.uni-swiper-tab{
		width: 628rpx;
		padding:20upx 0 20upx 120upx;
		height:120upx;
	}
	.scrollbox{position: fixed;width:100%;bottom:0;background:#FFFFFF;}
	.msg{position: fixed;width:100%;bottom:250upx;color:#FFFFFF;text-align: center;font-size:22upx;}
	.more{
		position: absolute;
		left: 0;
		top: 0;
		width: 120upx;
		height: 120upx;
		padding: 20rpx 0;
		font-size: 24rpx;
		text-align: center;
	}
	.more image{
		width:50upx;
		height:50upx;
		display: block;
		margin: 10upx auto;
	}

	.swiper-box::-webkit-scrollbar {display:none}
	scroll-view::-webkit-scrollbar {display:none}
	.swiper-item::-webkit-scrollbar {display:none}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*规格弹窗*/
	page {
		// background-color: #f8f8f8;
	}
	@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(-100%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(-100%);
			}
			100% {
				transform: translateY(0);
			}
		}
	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
			format('woff2');
	}
	.icon {
		font-family: 'HMfont-home' !important;
		font-size: 26upx;
		font-style: normal;
		&.fenxiang {
			&:before {
				content: '\e642';
			}
		}
		&.xiangqian {
			&:before {
				content: '\e634';
			}
		}
		&.xiangyou {
			&:before {
				content: '\e637';
			}
		}
		&.shoucangsel {
			&:before {
				content: '\e62c';
			}
		}
		&.shoucang {
			&:before {
				content: '\e62e';
			}
		}
		&.tongzhi {
			&:before {
				content: '\e729';
			}
		}
		&.kefu {
			&:before {
				content: '\e61e';
			}
		}
		&.cart {
			&:before {
				content: '\e614';
			}
		}
		&.jia {
			&:before{content:"\e641";}
		}
		&.jian {
			&:before{content:"\e643";}
		}
	}
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
		background-color: #f1f1f1;
	}
	.header {
		width: 100%;
	
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		.before,
		.after {
			width: 92%;
			padding: 0 4%;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			top: 0;
			/*  #ifdef  APP-PLUS  */
				top: var(--status-bar-height);
			/*  #endif  */
	
			.back {
				width: 125upx;
				height: 60upx;
				flex-shrink: 0;
				.icon {
					margin-left: -10%;
					width: 60upx;
					height: 60upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 42upx;
				}
			}
			.middle {
				width: 100%;
			}
			.icon-btn {
				width: 125upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;
				.icon {
					&:first-child{
						margin-right: 5upx;
					}
					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 42upx;
				}
			}
		}
		.before {
			.back {
				.icon {
					color: #fff;
					background-color: rgba(0, 0, 0, 0.2);
					border-radius: 100%;
				}
			}
			.icon-btn {
				.icon {
					color: #fff;
					background-color: rgba(0, 0, 0, 0.2);
					border-radius: 100%;
					
				}
			}
		}
		.after {
			background-color: #f1f1f1;
			.back {
				.icon {
					color: #666;
				}
			}
			.icon-btn {
				.icon {
					color: #666;
				}
			}
			.middle {
				font-size: 32upx;
				height: 90upx;
				display: flex;
				justify-content: center;
				align-items: center;
				view {
					padding: 0 3%;
					margin: 0 3%;
					display: flex;
					justify-content: center;
					align-items: center;
					&.on {
						margin-bottom: -4upx;
						color: #f47952;
						border-bottom: solid 4upx #f47952;
					}
				}
			}
		}
	}
	.swiper-box {
		position: relative;
		width: 100%;
		height: 100vw;
		swiper {
			width: 100%;
			height: 100vw;
			swiper-item {
				image {
					width: 100%;
					height: 100vw;
				}
			}
		}
		.indicator{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 25upx;
			height: 40upx;
			border-radius: 40upx;
			font-size: 22upx;
			position: absolute;
			bottom: 20upx;
			right: 20upx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}
	.info-box {
		width: 92%;
		padding: 20upx 4%;
		background-color: #fff;
		margin-bottom: 20upx;
	}
	
	.goods-info {
		.price {
			font-size: 46upx;
			font-weight: 600;
			color: #f47925;
		}
		.title {
			font-size: 30upx;
		}
	}
	.spec {
		.row {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 0 0 30upx 0;
			.text {
				font-size: 24upx;
				color: #a2a2a2;
				margin-right: 20upx;
			}
			.content {
				font-size: 28upx;
				display: flex;
				flex-wrap: wrap;
				.serviceitem{
					margin-right: 10upx;
				}
				.sp {
					width: 100%;
					display: flex;
					view {
						background-color: #f6f6f6;
						padding: 5upx 10upx;
						color: #999;
						margin-right: 10upx;
						font-size: 20upx;
						border-radius: 5upx;
						&.on{
							border: solid 1upx #f47952;
							padding: 4upx 8upx;
						}
					}
				}
			}
			.arrow {
				position: absolute;
				right: 4%;
				.icon {
					color: #ccc;
				}
			}
		}
	}
	.comments {
		.row {
			width: 100%;
			height: 40upx;
			display: flex;
			align-items: center;
			margin: 0 0 30upx 0;
			.text {
				font-size: 30upx;
			}
			.arrow {
				font-size: 28upx;
				position: absolute;
				right: 4%;
				color: #17e6a1;
				.show {
					display: flex;
					align-items: center;
					.icon {
						color: #17e6a1;
					}
				}
			}
		}
		.comment {
			width: 100%;
			.user-info {
				width: 100%;
				height: 40upx;
				display: flex;
				align-items: center;
				.face {
					width: 40upx;
					height: 40upx;
					margin-right: 8upx;
					image {
						width: 40upx;
						height: 40upx;
						border-radius: 100%;
					}
				}
				.username {
					font-size: 24upx;
					color: #999;
				}
			}
			.content {
				margin-top: 10upx;
				font-size: 26upx;
			}
		}
	}
	.description {
		.title {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: #999;
		}
	}
	.footer {
		position: fixed;
		bottom: 0upx;
		width:100%;
		border-top: solid 1upx #eee;
		background-color: #fff;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		
		text-align: center;
		.icons {
			display: flex;
			height: 98upx;
			.box {
				width:210upx;
				height: 98upx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				image{
					width: 55upx;
					height:55upx;
					display: block;
					margin:0 auto;
				}
				.text {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 24upx;
					color: #666;
					line-height:1;
				}
			}
		}
		.btn {
			text-align:center;
			height: 98upx;
			overflow: hidden;
			display: flex;
			width:540upx;
			.joinCart{
				height: 98upx;
				color: #fff;
				font-size: 34upx;
				line-height:98upx;
				text-align: center;
				background-color: #067aee;
				width:100%;
				text-align: center;
			}
		}
	}
	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		display: none;
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.layer {
			position: fixed;
			z-index: 22;
			bottom: -38%;
			width: 92%;
			padding: 0 4%;
			height: 38%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			.content {
				width: 100%;
				padding: 20upx 0;
			}
			.btn {
				width: 100%;
				height: 100upx;
				.button {
					width: 100%;
					height: 80upx;
					border-radius: 40upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f47952;
					font-size: 28upx;
				}
			}
		}
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		&.service {
			.row {
				margin: 30upx 0;
				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}
				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}
		&.spec {
			.title {
				font-size: 30upx;
				margin: 30upx 0;
			}
			.sp {
				display: flex;
				view {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 8upx;
					margin: 0 30upx 20upx 0;
					background-color: #f6f6f6;
					&.on {
						padding: 3upx 18upx;
						border: solid 1upx #f47925;
					}
				}
			}
			.length{
				margin-top: 30upx;
				border-top: solid 1upx #aaa;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20upx;
				.text{
					font-size: 30upx;
				}
				.number{
					display: flex;
					justify-content: center;
					align-items: center;
					.input{
						width: 80upx;
						height: 60upx;
						margin: 0 10upx;
						background-color: #f3f3f3;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						input{
							width: 80upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							font-size: 26upx;
						}
					}
					
					.sub ,.add{
						width: 60upx;
						height: 60upx;
						background-color: #f3f3f3;
						border-radius: 5upx;
						.icon{
							font-size: 30upx;
							width: 60upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							
						}
					}
				}
			}
			
		}
	}
	.share{
		display: none;
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.15s linear both;
			}
			.layer {
				animation: showLayer 0.15s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.15s linear both;
			}
			
			.layer {
				animation: hideLayer 0.15s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			background-color: rgba(0,0,0,.5);
			position: fixed;
			width: 100%;
			height: 100%;
			top:0;
			z-index: 11;
		}
		.layer{
			width: 92%;
			position: fixed;
			z-index: 12;
			padding: 0 4%;
			top: 100%;
			background-color: rgba(255,255,255,0.9);
			.list{
				width: 100%;
				display: flex;
				padding:10upx 0 30upx 0;
				.box{
					width: 25%;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					image{
						width: 13.8vw;
						height: 13.8vw;
					}
					.title{
						margin-top: 10upx;
						display: flex;
						justify-content: center;
						width: 100%;
						font-size: 26upx;
					}
				}
			}
			.btn{
				width: 100%;
				height: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				border-top: solid 1upx #666666;
			}
			.h1{
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
			}
		}
	}
</style>
